<template>
<div class="about">
  <div style="text-align: right;margin: 10px 0">
    <el-button type="primary" style="float: left" @click="goBack()">返回</el-button>
    <el-button type="primary" @click="goNext()">确定</el-button>
  </div>
  <div>
    <el-card>
      <template>
        <div style="text-align: left">
          <el-radio v-model="redio1" label="1" border size="medium"  style="margin: 10px 0 0 10px">题库组卷</el-radio>
          <el-radio v-model="redio1" label="2" border size="medium" >自由组卷</el-radio>
        </div>
      </template>
      <el-card style="margin: 0px 10px;font-size: 12px;text-align: left">
        <el-button style="margin: 10px 15px" type="primary" size="small" @click="addQuestionByBankId()"><i class="el-icon-plus" style="margin: 0 10px 0 0;font-size: 12px"></i>添加题目</el-button>
        <span style="float: right;margin:10px 80px;font-size: 16px">总分: <span>{{totalScore}}</span></span>
        <el-table
            :data="questions"
            style="width: 100%"
            :default-sort = "{prop: 'date', order: 'descending'}">
          <el-table-column
              label="序号"
              type="index"
              width="100">
          </el-table-column>
          <el-table-column
              prop="quContent"
              label="题目内容">
          </el-table-column>
          <el-table-column
              prop="quType"
              label="题目类型"
              width="240">
            <template slot-scope="scope">
              {{questionType[scope.row.quType]}}
            </template>
          </el-table-column>
          <el-table-column label="单题分数">
            <template slot-scope="scope">
              <el-input v-model="scope.row.scores" type="number" @change="updateScore()"></el-input>
            </template>
          </el-table-column>
          <el-table-column  label="操作">
            <template slot-scope="scope">
              <el-button type="danger" @click="deleteByQuestion(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
    <!--  根据题库选择试题    -->
    <el-dialog title="请选择题库" :visible.sync="addQuestionDialog" width="450px" >
      <el-form :label-width="formLabelWidth" align="left">
        <el-form-item label="题库名称" >
          <el-select v-model="bankId" :value="bankId" placeholder="请选择题库">
            <el-option v-for="item in bankArr" :label="item.bankName" :value="item.bankId" :key="item.bankId"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: left;margin-left:50px ">
        <el-button @click="addQuestionDialog = false">取 消</el-button>
        <el-button type="primary" @click="goQuestionAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
export default {
  data(){
    return {
      examAddNew:{
        examName:'',
        examDesc:'',
        type:'',
        password:'',
        //考试时间
        duration:'',
        //开始时间
        startTimeStr:'',
        endTimeStr:'',
        //总分
        totalScore:'',
        //及格线
        passScore:0,

        majorId:'',
        majorName:'',

        classIds:'',

        classNames:'',

        questions:[]
      },
      questions:[],
      questionsFromService:[],
      /*选择题库组卷时的数组*/
      bankArr:[],
      questionType:["","单选题","多选题","判断题","简答题"],
      bankId:'',
      addQuestionDialog:false,
      formLabelWidth:'120px',
      AddBankId:0,
      redio1:'1',
      /*总分*/
      sumScore:0,
      totalScore:0
    }
  },
  methods:{
    //更新总分 1
    updateScore(){
      localStorage.setItem("examQuestions",JSON.stringify(this.questions));
      this.statisticsTotalScore();
    },
    //根据id删除数据 1
    deleteByQuestion(index){
      this.questions.splice(index,1);
      console.log(this.questions)
      localStorage.setItem("examQuestions",JSON.stringify(this.questions));
      this.statisticsTotalScore();
    },
    goQuestionAdd(){
      localStorage.setItem("bankId",this.bankId);
      localStorage.setItem("redio1",this.redio1)
      let examId = this.$router.currentRoute.query.examId;
      this.addQuestionDialog=false;
      this.$router.push('/exam/questionUpdate?examId='+examId);
    },
    //使用
    goBack(){
      localStorage.removeItem("examQuestions");
      this.$router.push('/exam');
    },
    goNext(){
      console.log(this.questions)
      let examId = this.$router.currentRoute.query.examId;
      let url = "http://localhost:9283/exam-question/update/"+examId;
      let jwt = localStorage.getItem("localJwt");
      this.axios
          .create({
            'headers': {
              'Authorization': jwt
            }
          })
          .post(url,this.questions).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          localStorage.removeItem("examQuestions");
          this.$router.push('/exam');
          if (jsonResult.jwt!=null){
            localStorage.setItem("localJwt",jsonResult.jwt);
          }
        }else if(jsonResult.state==70100){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
          this.$router.push('/')
        }  else {
          this.$alert(jsonResult.message, "错误", {
            confirmButtonText: '确定',
            callback: action => {
              console.log(action)

            }
          })
        }
      })
    },
    //1
    addQuestionByBankId(){
      console.log(this.redio1)
      if(this.redio1=='2'){
        localStorage.setItem("redio1",this.redio1)
        localStorage.setItem("bankId",null);
        this.$router.push('/exam/addNew1-SelectQuestion');
      }else {
        let url = "http://localhost:9282/bank/list?page=1&IsAll=all";
        let jwt = localStorage.getItem("localJwt");
        this.axios
            .create({
              'headers': {
                'Authorization': jwt
              }
            })
            .get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.bankArr = jsonResult.data.list;
            this.addQuestionDialog = true;
            if (jsonResult.jwt!=null){
              localStorage.setItem("localJwt",jsonResult.jwt);
            }
          }else if(jsonResult.state==70100){
            this.$alert(jsonResult.message, '错误', {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
            this.$router.push('/')
          }  else {
            this.$alert(jsonResult.message, "错误", {
              confirmButtonText: '确定',
              callback: action => {
                console.log(action)
                this.getNoticeArr()
              }
            })
          }
        })
      }
    },
    //统计总分
    statisticsTotalScore(){
      this.totalScore = 0;
      for (let i = 0; i < this.questions.length; i++) {
        this.totalScore =this.totalScore*1+ this.questions[i].scores*1;
      }
    },


    //获取数据加载进缓存
    LoadQuestion(){
      let examId = this.$router.currentRoute.query.examId;
      if(examId<1||examId==null){
        alert("违规操作")
        this.$router.push('/exam')
      }
      let updateing = this.$router.currentRoute.query.updateing;
      if(!(updateing<1||updateing==null)){
        return;
      }
      let url = "http://localhost:9283/exam-question/list/"+examId;
      let jwt = localStorage.getItem("localJwt");
      this.axios
          .create({
            'headers': {
              'Authorization': jwt
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.questions = jsonResult.data;
          localStorage.setItem("examQuestions",JSON.stringify(this.questions));
          this.statisticsTotalScore();
          if (jsonResult.jwt!=null){
            localStorage.setItem("localJwt",jsonResult.jwt);
          }
        }else if(jsonResult.state==70100){
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
          this.$router.push('/')
        }  else {
          this.$alert(jsonResult.message, "错误", {
            confirmButtonText: '确定',
            callback: action => {
              console.log(action)

            }
          })
        }
      })
    },
    //统计总分
    LoadLocalQuestion(){
      this.LoadQuestion();
      let questions = localStorage.getItem("examQuestions");
      if(questions==null){
        //若是没有则从数据库中获取
        return;
      }
      questions = JSON.parse(questions);
      this.questions = questions;
      //统计总分
      this.statisticsTotalScore();
      console.log(this.examAddNew.totalScore)
    }
  },
  mounted() {
    this.LoadLocalQuestion()
  }
}
</script>
<style>
.box-cardAdd .el-card__body{
  padding: 0;
}
.box-cardAdd .el-card__body a{
  text-decoration: none;
  cursor:pointer;
  margin:0 140px;
  vertical-align: 5px;
  font-size: 14px;
  font-weight: bold;
}
.box-cardAdd .el-card__body i{
  text-decoration: none;
  cursor:pointer;
  margin:0 140px;
  font-size: 14px;
  font-weight: bold;
}
.box-cardAdd .el-card__body i{
  font-size: 32px;
  padding: 0;
  margin:0;
  color: #8492a6
}
</style>
